<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<link rel="stylesheet" href="css/common/common.css">
	<link rel="stylesheet" href="css/cardpack/discovery.css">

	<title>mytitle</title>
</head>

<body id="app" class="usableBill">

<ul class="titleBar">
	<li class="close pad-left">✖</li>
	<li class="title">titleBar</li>
</ul>

<div class="pad" style="padding-top:10px;">

	<dl class="item">
		<dt class="container">
			<i><img width="58" height="58" src=""/></i>
			<div>我的标题</div>
		</dt>
		<dd></dd>
		<dt class="side">
			<span class="fl">tip1</span>
			<span class="fr">时间:2015-8-8</span>
		</dt>
	</dl>
	<dl class="item">
		<dt class="container">
			<i><img width="58" height="58" src=""/></i>
			<div>他的文字</div>
		</dt>
		<dd></dd>
		<dt class="side">
			<span class="fl">tip2</span>
			<span class="fr">时间:2015-8-8</span>
		</dt>
	</dl>

</div>

<div class="mask hide">
	
</div>
<div id="dialog" class="dialog hide">
	你的对话框，你做主。<br>
	还有你的按钮
</div>

</body>

</html>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/wPress.js"></script>
<script type="text/javascript">

"use strict";

var list =[
	{
		id:"001",
		caption:"我的标题",
	},
	{
		id:"002",
		caption:"他的文字",
	}
];


/*
提示：页面上的<dl class="item">...</dl>,可以通过获取后端数据渲染生成
*/
var press = new wPress({
	container : $(".pad")[0],
	interval  : 700,
	ondown   : function(e){
		/*
		alert(this.touchTarget + " is your touch Node");
		alert("this is current record:\n" + JSON.stringify(object));
		alert("do something,");
		*/
		$(".mask").removeClass("hide");
		$(".dialog").removeClass("hide");
		var touch = e.touches[0];
		//获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientY
		var x = touch.clientX;
		var y = touch.clientY;

		$(".dialog").html(x+","+y+"<br>"+this.touchTarget);
	},
	onup : function(e){
		alert(this.touchTarget+","+this.target);
		$(".mask").addClass("hide");
		$(".dialog").addClass("hide");	
	}
});

$(".dialog").on("click",function(){
	$(".mask").addClass("hide");
	$(".dialog").addClass("hide");
});

</script>



